<template>
  <div class="app-container">
    <u-page-config
      :filter-array="filterArray"
      v-model="filter"
      :actionBtn="actionBtn"
      label-width="100px"
      :getList="getList"
      :tableData="tableData"
      :tableColumn="tableColumn"
      :total="total"
      :loading="loading"
      @addRow="addRow"
    >

      <template #maintenanceType="{row, item}">
        {{ getDictLabel(maintenanceTypeOptions, row.maintenanceType) }}
      </template>
    </u-page-config>

    <add-fix-records-dialog
      v-model="visible"
      @getList="getList"
    />

  </div>
</template>

<script>
import UPageConfig from '@/components/uPageConfig/index'
import UForm from '@/components/uForm'
import table from '@/mixin/uTable';
import AddFixRecordsDialog from './components/addFixRecordsDialog'
import {
  getMaitenance,
  addMaitenance,
} from '@/api/operationAndMonitoring/fixRecords'

export default {
  name: "FixRecords",
  mixins: [table],
  components: {UPageConfig, UForm, AddFixRecordsDialog},
  computed: {
    // 运维人员下拉框数据
    operationUserOptions() {
      return this.$store.state.device.operationUserOptions || []
    },
  },
  data() {
    return {
      maintenanceTypeOptions: [
        {label: '更换', value: 1},
        {label: '维修', value: 2},
      ],
      filterArray: [
        {label: "设备部署名称", key: "deploymentName", type: "input"},
        {label: "维修人员", key: "operationUserCode", type: "select", options: []},
      ],
      tableColumn: [
        {label: "设备ID", prop: "deviceId"},
        {label: "设备名称", prop: "deploymentName"},
        {label: "模块名称", prop: "moduleName",},
        {label: "旧模块型号", prop: "oldModule"},
        {label: "新模块型号", prop: "newModule"},
        {label: "维修方式", prop: "maintenanceType", type: 'slot', slot: 'maintenanceType'},
        {label: "维修人", prop: "operationUserName"},
        {label: "维修时间", prop: "createTime", type: 'time'},
        {label: "备注", prop: "remark"},
        {label: "关联工单号", prop: "workOrderId"},
        /* {
           label: "操作", type: "btn", attr: {width: 100}, btnArr: [
             {icon: "el-icon-view", text: "详细", emit: "rowDetail"},
           ]
         }*/
      ],
      actionBtn: [
        {
          type: 'primary',
          text: '新增维修记录',
          icon: 'el-icon-plus',
          emit: 'addRow',
          permissions: 'operationAndMonitoring:workOrder:add'
        }
      ],
      detailArray: [
        {label: "工单ID：", key: "id", col: 12, type: "text",},
        {label: "设备ID：", key: "deviceId", col: 12, type: "text",},
        {label: "设备部署名称：", key: "deploymentName", col: 12, type: "text", placeholder: ' '},
      ],
    };
  },
  methods: {
    // 表单提交接口相关配置
    formSubmitFunConfig() {
      return {
        addFunc: addMaitenance,
        modifyFunc() {
        },
        pk: 'id',
        options: {
          ...this.form
        },
        cbFunc: () => {
          this.visible = false
        }
      }
    },
    // 添加
    addRow() {
      this.mode = 'form';
      this.visible = true;
    },
    /** 查询工单列表 */
    getList() {
      this.getInit(getMaitenance, {})
    },
    /** 返回设备部署页面 */
    goBack() {
      this.$router.go(-1);
    },
  },
  watch: {
    operationUserOptions: {
      immediate: true,
      handler(newValue) {
        // 设置运维人员选项数据
        try {
          this.filterArray.find(item => item.key === 'operationUserCode').options = newValue;
        } catch (e) {
          console.log("找不到对应表单项", e)
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.form-item-wrap {
  display: flex;
}
</style>
